import { imgTipMap } from "@userList/store";
import { userTypeMap } from "../dict";
import styles from "../index.module.less";
import {
  drawerFormState,
  expandLoading,
  isExpand,
  isNotShowAuthTime,
  isShowSpecialPopularityLevelBtn,
  modalFormState,
  operateType,
  sexColorOptions,
  sexIconOptions,
  tableActiveKey,
  tipsObject,
} from "../store";
import { handleExpand } from "../utils";
import AuthComponent from "./auth";
import UserComponent from "./user";
import defaultAvatarUrl from "@/assets/img/default-avatar.png";
import { modalTitle, modalVisible } from "../modal";
import IMToolTip from "@/components/common/ToolTip";
export default defineComponent({
  setup(props, { attrs }) {
    const router: any = useRouter();
    const { currentRoute } = router;
    const isShowAuthTime = () => {
      if (currentRoute.value.path === "/user/auth")
        isNotShowAuthTime.value = false;
      if (
        currentRoute.value.path === "/user/popular" &&
        tableActiveKey.value === 1
      )
        isNotShowAuthTime.value = true;
    };
    isShowAuthTime();
    return () => (
      <div class={[styles.drawer_container, "mb16"]}>
        <tips-card
          parentClass={styles.drawer_container}
          title={tipsObject.title}
          content={tipsObject.content}
        />
        <div class={[styles.user_wrap, "mb16"]}>
          <s-title>
            <div class={styles.title_wrap}>
              <span>
                <i>{$t("base.customInfo")}</i>
                {drawerFormState.real_person_status === 3 ? (
                  <i class={[drawerFormState.account_type ? styles.type : ""]}>
                    {selectDictLabel(userTypeMap, drawerFormState.account_type)}
                  </i>
                ) : (
                  <i class={[drawerFormState.account_type ? styles.type : ""]}>
                    {selectDictLabel(userTypeMap, drawerFormState.account_type)}
                  </i>
                )}
                <i
                  class={{
                    "s-52c41a": !!drawerFormState.active_time,
                    ml16: true,
                  }}
                >
                  {drawerFormState.active_time}
                </i>
              </span>

              {isShowSpecialPopularityLevelBtn.value
                ? withDirectivePower({
                    bindingValue: "popularApi.update",
                    vNode: (
                      <s-button
                        onClick={() => {
                          modalTitle.value = $t("base.specifyPopularityLevel");
                          modalFormState.editId = drawerFormState.editId;
                          operateType.value = "updateLevel";
                          modalVisible.value = true;
                        }}
                      >
                        {$t("base.specifyPopularityLevel")}
                      </s-button>
                    ),
                  })
                : null}
            </div>
          </s-title>

          <div class={styles.info_wrap}>
            {/* @ts-ignore */}
            <div class={styles.avatar_wrap} value={imgTipMap[1]}>
              <a-image
                src={drawerFormState.avatar}
                width="102px"
                height="102px"
              />
              {drawerFormState.real_person_status === 3 ? (
                <span class={styles.tag}>{$t("dict37")}</span>
              ) : (
                <span class={styles.tag}>{$t("dict38")}</span>
              )}
            </div>

            {drawerFormState?.account_picture?.length
              ? drawerFormState.account_picture.map((url) => {
                  return url ? (
                    <div
                      key={encodeByMd5(url)}
                      class={styles.avatar_wrap}
                      //  @ts-ignore
                      // value={imgTipMap[url]}
                    >
                      <a-image src={url} width="102px" height="102px" />
                    </div>
                  ) : null;
                })
              : null}
          </div>
          <div class={styles.info_wrap}>
            <div class={[styles.introduce_wrap, "mb16"]}>
              <div class={styles.row}>
                <span>
                  <i class={styles.strong}>{drawerFormState.nickname}</i>
                  {renderIcon(
                    sexIconOptions[drawerFormState.sex] +
                      " " +
                      styles["strong"],
                    null,
                    ` color: ${sexColorOptions[drawerFormState.sex]}`
                  )}
                </span>
                <span class={styles.card}>
                  {drawerFormState.vipLevel ? (
                    <i>{drawerFormState.vipLevel}</i>
                  ) : null}
                  {drawerFormState.scoreLevel ? (
                    <i>{drawerFormState.scoreLevel}</i>
                  ) : null}
                  {drawerFormState.popularLevel ? (
                    <i>{drawerFormState.popularLevel}</i>
                  ) : null}
                </span>
                <span>
                  <i class={{ "s-52c41a": !!drawerFormState.activeTime }}>
                    {drawerFormState.activeTime}
                  </i>
                </span>
              </div>

              <div class={styles.row}>
                <span>
                  <i>
                    {drawerFormState.age
                      ? drawerFormState.age + "岁"
                      : undefined}
                  </i>
                  {drawerFormState.age ? (
                    <a-divider class={styles.divider} type="vertical" />
                  ) : null}

                  <i>{drawerFormState.country}</i>
                  {drawerFormState.country ? (
                    <a-divider class={styles.divider} type="vertical" />
                  ) : null}

                  <i>{drawerFormState.constellation}</i>
                </span>

                <span>
                  {drawerFormState.position ? (
                    <>
                      {renderIcon("icon-position")}
                      <i>{drawerFormState.position}</i>
                    </>
                  ) : null}
                </span>
              </div>

              <div style="display:flex;align-items: center;flex-wrap: wrap;">
                <div class="left">
                  <div class={styles.row}>
                    <span>
                      <i>
                        {drawerFormState.height
                          ? drawerFormState.height + "cm"
                          : undefined}
                      </i>
                      {drawerFormState.height ? (
                        <a-divider class={styles.divider} type="vertical" />
                      ) : null}

                      <i>
                        {drawerFormState.weight
                          ? drawerFormState.weight + "kg"
                          : undefined}
                      </i>
                    </span>
                  </div>

                  <div class={styles.row}>
                    {isNotShowAuthTime.value ? null : (
                      <span>
                        <i>{$t("table52")}：</i>
                        <i>
                          {!isEmptyType(drawerFormState.created_at)
                            ? getTimeByZone(drawerFormState.created_at)
                            : null}
                        </i>
                      </span>
                    )}

                    <span></span>
                    <span></span>
                  </div>
                </div>
                <div
                  class="right"
                  style="display:flex;align-items: center;column-gap: 5px;"
                >
                  {$t("table89") + ":"}
                  {drawerFormState?.intention?.length >= 1 ? (
                    <div class="s_flex_cell">
                      <i class="Dashed fs10">{drawerFormState.intention[0]}</i>
                      <im-tooltip
                        color="#ffffff"
                        defaultValue={
                          <i class="Dashed fs10">
                            {drawerFormState.intention.slice(1).length}
                          </i>
                        }
                        title={
                          <div class="s_title_containter">
                            {drawerFormState.intention.slice(1)?.map((item) => (
                              <div class="title_wrap fs10">
                                <i>{item}</i>
                              </div>
                            ))}
                          </div>
                        }
                      />
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
          <a-spin spinning={expandLoading.value}>
            <div class={styles.detail_wrap}>
              <div class={styles.nav_wrap}>
                <span class={styles.sub_tit}>
                  <i>{$t("base.detail")}</i>
                </span>
                <span
                  onClick={handleExpand.bind(this, {
                    uid: drawerFormState.uid,
                  })}
                  class={styles.tit_icon}
                >
                  <i>
                    {isExpand.value ? $t("base.retract") : $t("base.expand")}
                  </i>
                  {renderIcon(
                    "icon-zhankai" +
                      " " +
                      (isExpand.value ? styles.rotate90 : styles.rotate0)
                  )}
                </span>
              </div>
              <div class={[styles.row, "ml8"]}>
                <span>
                  <i>{$t("table106") + "ID"}: </i>
                  <i>{drawerFormState.uid}</i>
                </span>
              </div>
            </div>

            {isExpand.value ? <UserComponent /> : null}
          </a-spin>
        </div>
        <AuthComponent />
      </div>
    );
  },
});
